

<template>
  <div id="app">
<!--    <aty-circle-progress :percent="80"></aty-circle-progress>-->
    <header class="header">
      <router-link to="/home">Home</router-link>
      <router-link to="/text">text</router-link>

      <aty-text>这里是aty-text</aty-text>
      <aty-text>这里是aty-text2</aty-text>
    </header>
    <transition name="fade" mode="out-in">
      <router-view class="view"></router-view>
    </transition>
  </div>
</template>
<script>
  export default {
    components: {
    }
  }
</script>
<style lang="stylus">
  *
    margin 0
    padding 0
  body
    font-family -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    font-size 15px
    background-color lighten(#eceef1, 30%)
    margin 0
    color #34495e
    overflow-y scroll
  div
    box-sizing border-box
</style>

<style scoped lang="stylus">
  #app
    position relative
    top 0
    left 0
    width 100%
    min-height 100vh
    padding-bottom 320px
  .header
    width 100%
    height 60px
    border-bottom 1px solid #ccc
    background-color #f69
    text-align center
    .title
      line-height 3
      font-size 20px
    a
      display inline-block
      height 60px
      color rgba(255, 255, 255, .8)
      line-height 60px
      transition color .15s ease
      display inline-block
      vertical-align middle
      font-weight 300
      letter-spacing .075em
      margin-right 1.8em
      font-size 18px
      &:hover
        color #fff
      &.router-link-active
        color #fff
        font-weight 400

  .fade-enter-active, .fade-leave-active
    transition all .2s ease
  .fade-enter, .fade-leave-active
    opacity 0
  .view
    padding 20px 50px
</style>

<style  lang="stylus" type="text/stylus"  >
  @import "./components/css/index.styl";
</style>
<!--<style  lang="scss" type="text/scss"  >
    @import "./components/css/index.scss";
</style>-->
<style  lang="less" type="text/less"  >
  @import "./components/css/index.less";

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .fd-header {
    margin-bottom: 10px;
  }
  #app {
    position: relative;
    z-index: 1;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    overflow:auto;
    .fd-h1 {
      /*  display: none;*/
      height: 175px;
      background-color: #fff;
      box-shadow: 0 1px 5px rgba(0,0,0,0.3);
    }
    >nav {
      /*    display: none;*/
      float: left;
      width: 650px;
      min-height: 770px;
      border: 1px solid #d7dde4;
    }
    >.fd-main {
      margin-left: 670px;
      /*  margin-left: 0;*/
      min-height: 770px;
      overflow: hidden;
      border: 1px solid #d7dde4;
    }
    dl {
      position: relative;
      z-index: 1;
      padding-top: 5px;
      padding-bottom:5px;
      padding-left: 130px;
      overflow: hidden;
      border-bottom: 1px solid #d7dde4;
      >dt {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1;
        width: 130px;
        font: 700 20px/30px "Microsoft YaHei";
        border-right: 1px solid #d7dde4;
        >span {
          position: absolute;
          top: 50%;
          left: 0;
          z-index: 1;
          margin-top: -15px;
          width: 100%;
        }
      }
      >dd {
        float: left;
        padding: 0 10px;
        width: 20%;
        /*     overflow: hidden;*/
        text-align: left;
        white-space: nowrap;
        overflow: visible;
        font: 14px/30px "Microsoft YaHei";
        &.fd-col2 {
          width: 30%;
        }
      }
    }
  }
</style>
